<!DOCTYPE html>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>青芽医疗管理平台</title>
  <meta name="description" content="数据采集分析系统">
  <meta name="keywords" content="数据采集分析系统">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
<!--  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">-->
</head>
<body class="hold-transition">

<div id="app">
  <el-descriptions title="用户就诊信息" direction="horizontal" :column="2" border>
    <el-descriptions-item label="姓名">{{patients.patientName}}</el-descriptions-item>
    <el-descriptions-item label="性别">{{patients.patientGender}}</el-descriptions-item>
    <el-descriptions-item label="出生日期">{{patients.formatPatientBirthday}}</el-descriptions-item>
    <el-descriptions-item label="身份证号">{{patients.patientCardId}}</el-descriptions-item>
    <el-descriptions-item label="电话号码">{{patients.patientPhone}}</el-descriptions-item>
    <el-descriptions-item label="家庭住址">{{patients.patientAddress}}</el-descriptions-item>
    <el-descriptions-item label="医保卡" :span="2">{{patients.patientHealthInsuranceCard}}</el-descriptions-item>
  </el-descriptions>
  <br>
  <el-button type="primary" @click="handleGetUser()">选择医生</el-button>
  <br>
  <br>
  <el-form ref="dataEditForm" :model="registeredOrder"  label-position="right" label-width="100px">
    <el-form-item label="房间id" prop="departmentId" v-if="false">
      <el-input v-model="registeredOrder.departmentId" disabled/>
    </el-form-item>
    <el-form-item label="医生id" prop="userId" v-if="false">
      <el-input v-model="registeredOrder.userId" disabled/>
    </el-form-item>
    <el-form-item label="房间id" prop="roomId" v-if="false">
      <el-input v-model="registeredOrder.roomId" disabled/>
    </el-form-item>
    <el-form-item label="医生姓名" prop="name">
      <el-input v-model="registeredOrder.name" disabled/>
    </el-form-item>
    <el-form-item label="科室" prop="departmentName">
      <el-input v-model="registeredOrder.departmentName" disabled/>
    </el-form-item>
    <el-form-item label="房间" prop="roomNumber">
      <el-input v-model="registeredOrder.roomNumber" disabled/>
    </el-form-item>
    <el-form-item label="挂号费" prop="registeredFree">
      <el-input v-model="registeredOrder.registeredFree" disabled/>
    </el-form-item>
    <el-form-item label="预约时间" prop="reserveInquiryTime">
      <el-date-picker v-model="registeredOrder.reserveInquiryTime" type="datetime" placeholder="选择日期"></el-date-picker>
    </el-form-item>
  </el-form>
  <el-button type="success" @click="toAlipay()" v-if="flag">挂号</el-button>

  <div class="add-form">
    <el-dialog title="选择医生" :visible.sync="dialogFormVisible"  width="1060px" :close-on-click-modal="false">
      <div class="filter-container">
        <el-select clearable="true" placeholder="科室" v-model="pagination.departmentId">
          <el-option
                  :key="item.departmentId"
                  :label="item.departmentName"
                  :value="item.departmentId"
                  v-for="item in departmentList">
          </el-option>
        </el-select>
        <el-button @click="_getDoctorSchedulePage()" class="dalfBut">查询</el-button>
      </div>
      <el-table :data="list" current-row-key="doctorScheduleId" highlight-current-row size="small" stripe>
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="医生名称" prop="name"></el-table-column>
        <el-table-column align="center" label="科室名称" prop="departmentName"></el-table-column>
        <el-table-column align="center" label="房间名称" prop="roomNumber"></el-table-column>
        <el-table-column align="center" label="病人预约人数" prop="patientReserveNumber"></el-table-column>
        <el-table-column align="center" label="病人已就诊人数" prop="patientVisitedNumber"></el-table-column>
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="getUser(scope.row)" size="mini" type="primary">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                @current-change="handleCurrentChange"
                class="pagiantion"
                layout="total, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</div>

</body>
<!-- 引入组件库 -->
<script src="/js/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--<script src="element-ui/lib/index.js"></script>-->
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script type="application/javascript">
  var app = new Vue({
    el: '#app',
    data: {
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        queryString: null//查询条件
      },
      patients:{},
      registeredOrder:{},
      dialogFormVisible:false,
      list:[],
      departmentList:[],
      flag:false,
    },
    mounted () {
      this.showPatient();
    },
    methods: {
      showPatient(){
        axios.post('/user/getSessionUser').then(res => {
          var user = res.data;
          axios.post('/patient/getPatientByUserId?userId='+user.userId).then(r => {
            if(r.data==""){
              this.flag = false;
              this.$message.error('该用户没有就诊信息！需要添加就诊信息才能挂号！');
            }else {
              this.flag = true;
              this.patients = r.data;
              this.registeredOrder.patientId = this.patients.patientId;
            }
          });
        });
      },
      //查询医生排班表，找到所有正在上班的医生
      handleGetUser(){
        this.dialogFormVisible=true;
        var queryPageBean = {
          currentPage: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          queryTerm: {
            departmentId: this.pagination.departmentId,
            userId: this.pagination.userId,
            roomId: this.pagination.roomId
          }
        };
        axios.post("/doctorSchedule/getDoctorSchedulePage", "queryPageBean=" + JSON.stringify(queryPageBean)).then((res) => {
          this.list = res.data.list;
          this.pagination.total = res.data.total;
        });
        axios.post("/department/getDepartmentList",).then((res) => {
          this.departmentList = res.data;
        });
      },
      _getDoctorSchedulePage(){
        this.pagination.currentPage = 1;
        this.handleGetUser();
      },
      getUser(row){
        this.registeredOrder.name = row.name;
        this.registeredOrder.departmentName = row.departmentName;
        this.registeredOrder.roomNumber = row.roomNumber;
        this.registeredOrder.userId = row.userId;
        this.registeredOrder.roomId = row.roomId;
        this.registeredOrder.departmentId = row.departmentId;
        this.registeredOrder.registeredFree = 5;

        this.dialogFormVisible = false;
      },
      toAlipay(){
        axios.post('/registeredOrder/isRegisteredOrderTime?patientId='+this.patients.patientId+"&time="+formatDate(this.registeredOrder.reserveInquiryTime,"YYYY-MM-DD")).then(res => {
          if(res.data == ""){
            location.href = "/Alipay/to_alipay?patientId="+this.registeredOrder.patientId+"&userId="+this.registeredOrder.userId+"&roomId="+this.registeredOrder.roomId+"&departmentId="+this.registeredOrder.departmentId+
                    "&registeredFree="+this.registeredOrder.registeredFree+"&reserveInquiryTime="+formatDate(this.registeredOrder.reserveInquiryTime,"YYYY-MM-DD hh:mm:ss");
          }else {
            this.$message.error(res.data);
          }
        });
      },
    }
  })
  function formatDate(date, format) {
    if(!(date instanceof Date)) {
      console.error("请传入正确的日期对象")
      return ""
    }
    const map = {
      "Y+": date.getFullYear(), // 年
      "M+": date.getMonth() + 1, // 月份
      "D+": date.getDate(), // 日
      "h+": date.getHours(), // 小时
      "m+": date.getMinutes(), // 分
      "s+": date.getSeconds() // 秒
    }

    for(let key in map) {
      let reg = new RegExp(`(${key})`)
      if(reg.test(format)) {
        let str = map[key].toString()
        format = format.replace(RegExp.$1, str.padStart(RegExp.$1.length, "0"))
      }
    }

    return format
  }
</script>
</html>